<template>
	<div id="company" class="table" v-show="formVisible">
		<div class="container">
			<div style="text-align:center;">
				<div style="text-align:left;margin:0 auto;">
					<el-form :model="modelData" label-width="120px">
						<div style="text-align:left;margin:0 auto;">
							<el-form-item label="机构头像：">
								<el-upload class="avatar-uploader" width="100" :show-file-list="false" :action="globaldata.uploadUrl" :on-success="handleAvatarSuccess">
									<img v-if="modelData.companyLogo" :src="modelData.companyLogoUrl" class="avatar">
									<i v-else class="el-icon-plus avatar-uploader-icon"></i>
								</el-upload>
								<div class="headimg">温馨提示：建议尺寸80*80</div>
							</el-form-item>
							<el-form-item class="text_align" label="机构名称：">
								<el-input v-model="modelData.companyName" :maxlength="50"></el-input>
							</el-form-item>
							<el-form-item class="text_align" label="机构简介：" prop="userName">
								<el-input v-model="modelData.companyShortIntro" type="textarea" :maxlength="200" placeholder="请输入机构简介"></el-input>
							</el-form-item>
							<el-form-item class="text_align" label="机构描述：">
								<el-input v-model="modelData.companyDesc" type="textarea" :maxlength="500" placeholder="请输入机构描述"></el-input>
							</el-form-item>
							<el-form-item label="投资案例" class="picture-card">
								<el-upload class="avatar-uploader" list-type="picture-card" :file-list="caseUrls" :action="globaldata.uploadUrl" :on-preview="handlePictureCardPreview" :on-remove="handleRemove" :on-success="handleAvatarSuccess2">
									<i class="el-icon-plus"></i>
								</el-upload>
							</el-form-item>
						</div>
					</el-form>
				</div>
			</div>
			<div style="clear:both;"></div>
			<div slot="footer" class="dialog-footer my_flex_right">
				<el-button @click="close()">返回</el-button>
				<el-button type="primary" @click="save()">保存</el-button>
			</div>
		</div>
		<el-dialog :visible.sync="dialogVisible">
			<img width="100%" :src="dialogImageUrl" alt="">
		</el-dialog>

	</div>
</template>

<script>
	import service from '../../../js/services/companyservice.js'
	export default {
		props: {
			parentDetailData: {},
			id: null
		},
		data() {
			return {
				modelData: {},
				caseUrls: [],
				formVisible: this.visible,
				dialogImageUrl: '',
				dialogVisible: false,
			}
		},
		computed: {},
		watch: {
			formVisible(newVal, oldVal) {
				if(newVal) {
					this.resetData();
					service.getModelData(this, this.id);
				}
			}
		},
		methods: {
			show() {
				this.formVisible = true;
			},
			save() {
				service.handleSave(this);
			},
			close() {
				this.parentDetailData.isTabelShow = true;
				this.formVisible = false;
			},
			handleAvatarSuccess(res, file) {
				let data = res.data;
				if(res.code == 1) {
					this.modelData.companyLogo = data.id;
					this.modelData.companyLogoUrl = this.globaldata.imgBaseUrl + data.id;
				} else {
					this.$message({
						message: res.msg,
						type: 'error'
					});
				}
			},
			handleAvatarSuccess2(res, file) {
				let data = res.data;
				if(res.code == 1) {
					if(this.modelData.investLogoIds) {
						this.modelData.investLogoIds = this.modelData.investLogoIds + ',' + data.id;
					} else {
						this.modelData.investLogoIds = data.id;
					}
					this.caseUrls.push({
						id:this.caseUrls.length,
						uid: data.id,
						url: this.globaldata.imgBaseUrl + data.id
					});
				} else {
					this.$message({
						message: res.msg,
						type: 'error'
					});
				}
			},
			handleRemove(file) {
				this.caseUrls.splice(file.id,1);
				this.modelData.investLogoIds=this.caseUrls.join(',');
			},
			handlePictureCardPreview(file) {
				this.dialogImageUrl = file.url;
				this.dialogVisible = true;
			},
			resetData() {
				this.modelData = {
					companyLogo: '',
					companyLogoUrl: '',
					id: null,
					companyDesc: '',
					companyName: '',
					companyShortIntro: '',
					investLogoIds: ''
				}
			},
		},
	}
</script><style lang="less">
	#company{
		.headimg{
			color: red;
		}
	}
	
</style>